Skip to main content

Availability Form

Overview​

The AvailabilityForm component is a React form built using Chakra UI and React Hook Form. It allows clinic admins to manage provider availability by selecting a business location, an agent, and scheduling available dates and times. The form validates inputs using Yup schema validation and integrates with Redux for state management.

Features​

  • Add or edit provider availability
  • Select business location and provider (agent)
  • Date picker for availability selection
  • Time picker for start time selection
  • Validation with Yup and React Hook Form
  • Integration with Redux and API services
  • Auto-fetch provider's availability based on selected location

Props​

interface AvailabilityFormProps {
  type?: "add" | "edit"; // Used to track which operation the form is handling
  providerId?: number; // This is available when editing availability
  isSubmitClicked?: boolean; //Default: False. Used to know when the submit button is clicked in order to submit the form.
  availability?: Availability; //This is available when editing availability. It is the availability data to be edited
  setIsSubmitClicked: Dispatch<SetStateAction<boolean>>; //Used to update the submit button state on the parent
  setIsFormValid: Dispatch<SetStateAction<boolean>>; //Used to update the form validity state on the parent
  onActionCompleted: () => void; //trigger cleanup actions on the parent after add or edit operations.
}

Form Fields & Validation​

const typeSchema = Yup.object().shape({
  duration: Yup.number().required("Duration is required"),
  available_date: Yup.string().required("Available date is required"),
  start_time: Yup.string().required("Start time is required"),
  business_location: Yup.object()
    .shape({
      id: Yup.number().required(),
      value: Yup.string().required(),
      label: Yup.string().required(),
    })
    .required("Business location is required"),
  agent: Yup.object()
    .shape({
      id: Yup.number().required(),
      value: Yup.string().required(),
      label: Yup.string().required(),
    })
    .required("Agent is required"),
});

Default Values​

The function formatProviderAvailFormData is used to structure agent data into a format suitable for the form fields.

Submission Logic​

  • If adding a new availability:
    • The form collects date, start time, duration, location, and agent details.
    • A new availability entry is created and stored.
  • If updating an existing availability:
    • The selected entry is modified with new details.
  • The form submission, based on the type prop, calls one of the below:
    • useAddAvailabilityMutation: See code, postman, or backend implemetation docs on this for more 
        query: (credentials) => ({
            url: 'waitlist/availability',
            method: 'POST',
            body: credentials,
          }),
    • useEditAvailabilityMutation: See code, postman, or backend implemetation docs on this for more 
        query: ({ availabilityId, ...credentials }) => ({
            url: `waitlist/availability/${availabilityId}`,
            method: 'POST',
            body: credentials,
          }),
  • Error handling is included to display messages when submission fails.

State Management​

  • Redux selectors and dispatchers handle availability data (addAvailabilities).
  • API hooks (useGetBusinessLocationQuery, useGetAgentsByLocationMutation, useEditAvailabilityMutation) fetch necessary options for dropdown fields.

UI Components​

The form consists of:

  • Multi-Select Dropdowns for business location and provider (agent)
  • Date Picker for selecting availability date
  • Time Picker for selecting start time
  • Number Input for duration selection

Conclusion​

The AvailabilityForm component enables the clinic admins to efficiently manage provider availabilities.